<html>

<head>
    <title>Attribution Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <button id="btnOSM" style="position: absolute; left:0; margin:10px;">Set attribution</button>
    <script type="module">
        'use strict';

        import { Globe } from '../../src/og/Globe.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';
        import { WMS } from '../../src/og/layer/WMS.js';

        document.getElementById("btnOSM").onclick = function () {
            states.setAttribution("Hello, WMS default USA population states example!");
        };

        let osm = new XYZ("OpenStreetMap", {
            specular: [0.0003, 0.00012, 0.00001],
            shininess: 20,
            diffuse: [0.89, 0.9, 0.83],
            isBaseLayer: true,
            url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            visibility: true,
            attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        let states = new WMS("USA Population", {
            extent: [[-128, 24], [-66, 49]],
            visibility: true,
            isBaseLayer: false,
            url: "//openglobus.org/geoserver/",
            layers: "topp:states",
            opacity: 1.0,
            attribution: 'Hi!',
            transparentColor: [1.0, 1.0, 1.0]
        });

        let globus = new Globe({
            "target": "globus",
            "name": "Earth",
            "terrain": new GlobusTerrain(),
            "layers": [osm, states]
        });

        globus.planet.flyExtent(states.getExtent());
    </script>
</body>

</html>